<!-- 学习时间好友排行，采用异步方式从api获取 -->
<style>
    .text-center th, td{
        text-align: center;
    }
</style>

<!-- 1 表格结构 -->
<table id="rank-table" class="table table-striped">
    <thead>
        <tr class="text-center">
            <th>排名</th>
            <th>用户</th>
            <th>学习</th>
        </tr>
    </thead>
    <tbody>
        <!-- 这里将动态填充用户数据 -->
    </tbody>
</table>

<script>
    // 发起异步请求
    $.ajax({
        url: "{{ url_for('auth.rank') }}",
        type: 'GET',
        data: {},
        success: function(data) {
            var tableBody = $('#rank-table tbody');

            // 清空表格内容
            tableBody.empty();

            // 遍历用户数据并动态填充表格
            for (var i = 0; i < data.length; i++) {
                var u = data[i];
                var name = `<a href='/auth/visit/${u['id']}'> ${u['name']} </a>`;
                // console.log(name);
                var row = '<tr class="text-center">' + 
                    `<td> ${i + 1}</td>` +
                    `<td> ${name}<small>(Lv${u['level']})</samll></td>` +
                    `<td> ${u['time']} h</td>` +
                    '</tr>'
                tableBody.append(row);
            }
        },
        error: function(xhr, status, error) {
            console.error('Error', error);
        },
    });
</script>
